<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;" /> 
<title>Dungeon ASCII</title>
<style type="text/css"> 
	* {
	  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
	  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
	/* make transparent link selection, adjust last value opacity 0 to 1.0 */
	  -webkit-tap-highlight-color: rgba(0,0,0,0); 
	  -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
	  -webkit-tap-highlight-color: rgba(0,0,0,0); 
	}
	
	body {
		background-color: #000000;
		margin: 0px;
		font-family: Arial;
	}
	canvas {
		display:block; 
		position:absolute; 
	}
	.container {
		width:auto;
		text-align:center;
		background-color:#ff0000;
	}
</style>
</head>
<body onload = "init()">
<script src="js/Vector2.js"></script>
<script src="js/sprite.js"></script>
<script src="js/utils.js"></script>
<script src="js/unit.js"></script>
<script src="js/player.js"></script>
<script src="js/animals.js"></script>
<script src="js/ennemies.js"></script>
<script src="js/astar.js"></script>
<script src="js/ennemiesAStar.js"></script>
<script src="js/room.js"></script>
<script src="js/dungeon.js"></script>
<script src="js/level.js"></script>
<script src="js/mainTouch.js"></script>
<script>

var canvas,
 	context, // context is the canvas' context 2D
	container, 
	halfWidth, 
	moveTouchID = -1, 
	moveTouchA = -1,
	moveTouchB = -1,
	moveTouchMenu = -1,
	moveTouchPos = new Vector2(0,0),
	moveTouchStartPos = new Vector2(0,0),
	moveVector = new Vector2(0,0),
	posTouchMove = new Vector2(0,0),
	tolTouchMove = 200,
	posTouchActionA = new Vector2(0,0),
	tolTouchActionA = 30,
	posTouchActionB = new Vector2(0,0),
	tolTouchActionB = 30,
	posTouchMenu = new Vector2(0,0),
	tolTouchMenu = 30;
var tileSize = 16;	
var timerLoad;
	

setupCanvas();

var mouseX, mouseY, 
	// is this running in a touch capable environment?
	touchable = 'createTouch' in document,
	touches = [] // array of touch vectors
	
var keysDown = {};

if(touchable) {
	canvas.addEventListener( 'touchstart', onTouchStart, false );
	canvas.addEventListener( 'touchmove', onTouchMove, false );
	canvas.addEventListener( 'touchend', onTouchEnd, false );
	window.onorientationchange = resetCanvas;  
	window.onresize = resetCanvas;  
} else {	
	canvas.addEventListener( 'mousemove', onMouseMove, false );
	
	canvas.addEventListener('mousedown', onMouseDown, false);
	//canvas.addEventListener('mousemove', onMouseMove, false);
	canvas.addEventListener('mouseup',   onMouseUp, false);
	canvas.addEventListener('mouseout',   onMouseUp, false);
}

function resetCanvas (e) {  
  	canvas.width = window.innerWidth; 
	canvas.height = window.innerHeight;
	
	moveTouchStartPos.reset(70,canvas.height-70);
	moveTouchPos.reset(70,canvas.height-70);
	posTouchMove.reset(0,canvas.height);
	posTouchActionA.reset(canvas.width-90,canvas.height-40);
	posTouchActionB.reset(canvas.width-40,canvas.height-90);
	posTouchMenu.reset(canvas.width-40,40);
	
	window.scrollTo(0,0); 
}

function init(){
	GenerateEnv();
	// place the player at the up stair case
	var stairs = levels[currentLevel].dungeon.getStairs();
	player.pos.x = (stairs.up.x * tileSize) + tileSize / 2 - player.size.x / 2;
	player.pos.y = (stairs.up.y * tileSize) + tileSize / 2 - player.size.y / 2;
	levels[currentLevel].Init();
	
	//window.requestAnimationFrame(MainLoop, document.getElementById('canvas'));
	//timerLoad.
	setInterval(MainLoop, 1000/35); 
}

/*	
 *	Touch event (e) properties : 
 *	e.touches: 			Array of touch objects for every finger currently touching the screen
 *	e.targetTouches: 	Array of touch objects for every finger touching the screen that
 *						originally touched down on the DOM object the transmitted the event.
 *	e.changedTouches	Array of touch objects for touches that are changed for this event. 					
 *						I'm not sure if this would ever be a list of more than one, but would 
 *						be bad to assume. 
 *
 *	Touch objects : 
 *
 *	identifier: An identifying number, unique to each touch event
 *	target: DOM object that broadcast the event
 *	clientX: X coordinate of touch relative to the viewport (excludes scroll offset)
 *	clientY: Y coordinate of touch relative to the viewport (excludes scroll offset)
 *	screenX: Relative to the screen
 *	screenY: Relative to the screen
 *	pageX: Relative to the full page (includes scrolling)
 *	pageY: Relative to the full page (includes scrolling)
 */	

function onTouchStart(e) {
 
	for(var i = 0; i<e.changedTouches.length; i++){
		var touch =e.changedTouches[i]; 
		var posTouch = new Vector2(touch.clientX,touch.clientY); 
		//console.log(moveTouchID + " " 
		if((moveTouchID<0) && (posTouch.isCloseTo(posTouchMove, tolTouchMove)))
		{
			moveTouchID = touch.identifier; 
			moveTouchStartPos.reset(touch.clientX, touch.clientY); 	
			moveTouchPos.copyFrom(moveTouchStartPos); 
			moveVector.reset(0,0); 
			touches = e.touches; 
			continue; 		
		} 
		else if((moveTouchA<0) && posTouch.isCloseTo(posTouchActionA, tolTouchActionA)) {
			moveTouchA = touch.identifier;
			touches = e.touches; 
			continue; 
		}
		else if((moveTouchB<0) && posTouch.isCloseTo(posTouchActionB, tolTouchActionB)) {
			moveTouchB = touch.identifier;
			touches = e.touches; 
			continue; 
		}
		else if((moveTouchMenu<0) && posTouch.isCloseTo(posTouchMenu, tolTouchMenu)) {
			moveTouchMenu = touch.identifier;
			touches = e.touches; 
			continue; 
		}	
	}	
}
 
function onTouchMove(e) {
	 // Prevent the browser from doing its default thing (scroll, zoom)
	e.preventDefault();
	
	for(var i = 0; i<e.changedTouches.length; i++){
		var touch =e.changedTouches[i]; 
		if(moveTouchID == touch.identifier)	{
			moveTouchPos.reset(touch.clientX, touch.clientY); 
			moveVector.copyFrom(moveTouchPos); 
			moveVector.minusEq(moveTouchStartPos); 	
			touches = e.touches;
			break; 		
		}
		else if(moveTouchA == touch.identifier) {
			touches = e.touches;
			break; 	
		}
		else if(moveTouchB == touch.identifier) {
			touches = e.touches;
			break; 	
		}
		else if(moveTouchMenu == touch.identifier) {
			touches = e.touches;
			break; 	 
		}
	}
	
	 
	
} 
 
function onTouchEnd(e) { 
   
   	touches = e.touches; 

	for(var i = 0; i<e.changedTouches.length; i++){
		var touch =e.changedTouches[i]; 
		if(moveTouchID == touch.identifier)
		{
			moveTouchID = -1; 
			moveVector.reset(0,0); 
			moveTouchStartPos.reset(50,canvas.height-50);
			moveTouchPos.reset(50,canvas.height-50);
			break; 		
		}	
		else if(moveTouchA == touch.identifier)
		{
			moveTouchA = -1; 
			break;
		}
		else if(moveTouchB == touch.identifier)
		{
			moveTouchB = -1; 
			break;
		}
		else if(moveTouchMenu == touch.identifier)
		{
			moveTouchMenu = -1; 
			break;
		}
	}
   
}

function onMouseMove(event) {

	mouseX = event.offsetX;
	mouseY = event.offsetY;
	
	if(moveTouchID == 0xcccc)
	{
		moveTouchPos.reset(event.offsetX, event.offsetY); 
		moveVector.copyFrom(moveTouchPos); 
		moveVector.minusEq(moveTouchStartPos); 		
	}
}

function onMouseDown(event) {
	var posMouse= new Vector2(event.offsetX, event.offsetY); 
	if((moveTouchID<0) && (posMouse.isCloseTo(posTouchMove, tolTouchMove)))
	{
		moveTouchID = 0xcccc;
		moveTouchStartPos.copyFrom(posMouse); 	
		moveTouchPos.copyFrom(posMouse); 
		moveVector.reset(0,0);  		
	}
	else
	{
		if(posMouse.isCloseTo(posTouchActionA, tolTouchActionA)) {
			moveTouchA = 0xcccc;
		}
		else if(posMouse.isCloseTo(posTouchActionB, tolTouchActionB)) {
			moveTouchB = 0xcccc;
		}
		else if(posMouse.isCloseTo(posTouchMenu, tolTouchMenu)) {
			moveTouchMenu = 0xcccc;
		}
	}
}

function onMouseUp(event){
	if(moveTouchID == 0xcccc)
	{
		moveTouchID = -1; 
		moveVector.reset(0,0); 
		moveTouchStartPos.reset(50,canvas.height-50);
		moveTouchPos.reset(50,canvas.height-50);	
	}
	else if(moveTouchA == 0xcccc)
	{
		moveTouchA = -1; 
	}
	else if(moveTouchB == 0xcccc)
	{
		moveTouchB = -1; 
	}
	else if(moveTouchMenu == 0xcccc)
	{
		moveTouchMenu = -1; 
	}
}


function setupCanvas() {
	
	canvas = document.createElement( 'canvas' );
	context = canvas.getContext( '2d' );
	container = document.createElement( 'div' );
	container.className = "container";

	document.body.appendChild( container );
	container.appendChild(canvas);	

	resetCanvas(); 
	
	context.strokeStyle = "#ffffff";
	context.lineWidth =2;	
}


</script>
</body>
</html>
